<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商名称：</span>
                <el-input placeholder="输入供应商名称" v-model.trim="supplier_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">日志类型：</span>
                <el-select v-model="log_type" clearable placeholder="请选择日志类型">
                    <el-option :label="item.label" :value="item.type" v-for="item in log_arrs" :key="item.type" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">日期范围：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="default" @click="clickExport">导出</el-button>
            </div>
        </div>
        <div class="table-mb"></div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="log_id" label="日志ID" width="100"></el-table-column>
            <el-table-column label="供应商" width="260">
                <template #default="{ row }">
                    <span>{{ row.supplier_title }}[ID: {{ row.supplier_id }}]</span>
                </template>
            </el-table-column>
            <el-table-column label="类型">
                <template #default="{ row }">
                    <span style="color: #4b93fa" v-if="row.type == 1">收益</span>
                    <span style="color: #4b93fa" v-else>{{ row.type == 5 ? "扣款" : "提现" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="number" label="余额变动" width="140"></el-table-column>
            <el-table-column label="变动缘由" min-width="240">
                <template #default="{ row }">
                    <div class="line-two">{{ row.intro }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="day" label="日期" width="140"></el-table-column>
            <el-table-column prop="created_at_label" label="创建时间" width="180"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    // getList()
})
/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
loading.value = false
arr_data.value = ref([
    {
        created_at_label: "2022-07-22 09:42:02",
        day: 20220722,
        intro: "订单完成(订单号:22071774121)，获得收入",
        log_id: 89603,
        number: "9.00",
        order_id: 9571,
        supplier_id: 10291,
        supplier_title: "金田时光花房",
        type: 1,
        type_label: "特价",
    },
])
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: supplier_name.value,
        supplier_id: supplier_id.value,
        log_type: log_type.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("", params)
}

// 搜索
const supplier_name = ref("")
const supplier_id = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 日志类型
const log_type = ref("")
const log_arrs = ref([
    {
        type: 1,
        label: "收益",
    },
    {
        type: 2,
        label: "提现",
    },
    {
        type: 3,
        label: "扣款",
    },
])
function getLogType() {
    proxy.$axios
        .get("")
        .then((res) => {
            if (res.data.code == 0) {
                log_arrs.value = res.data.data
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 导出
const clickExport = () => {}
</script>
<script>
export default {
    name: "SupplierLog",
}
</script>

<style lang="less" scoped></style>
